<template>
	<view class="content">
		<cu-custom bgColor="bg-gradual-blue">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">项目样式规范</block>
		</cu-custom>
		<view class="cu-bar margin-top bg-white">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>
				主题颜色(点击复制)
			</view>
		</view>
		<view class="grid col-5 cstom-grid">
			<view class="margin-tb-sm text-center" v-for="(item, index) in ColorList" :key="index">
				<button class="cu-btn round custom-button" :class="['bg-' + item.name, shadow ? 'shadow' : '']" @click="getColor(item)">{{ item.title }}</button>
			</view>
		</view>
		<view class="cu-bar margin-tb bg-white">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>
				文字大小
			</view>
		</view>

		<!-- 文字大小 -->
		<view class="bg-white padding-lr">
			<view class="solids-bottom padding-xs flex align-center">
				<view class="padding">40</view>
				<view class="flex-sub text-center">
					<view class="solid-bottom text-sl padding">
						<text class=" cuIcon-roundcheckfill text-green"></text>
						123
					</view>
					<view class="padding">用于图标、数字等较大显示</view>
				</view>
			</view>
			<view class="solids-bottom padding-xs flex align-center">
				<view class="padding">22</view>
				<view class="flex-sub text-center">
					<view class="solid-bottom text-xxl padding"><text class="text-price text-red">80.00</text></view>
					<view class="padding">用于金额数字等信息</view>
				</view>
			</view>
			<view class="solids-bottom padding-xs flex align-center">
				<view class="padding">18</view>
				<view class="flex-sub text-center">
					<view class="solid-bottom text-xl padding"><text class="text-black text-bold">您的订单已提交成功！</text></view>
					<view class="padding">页面大标题，用于结果页等单一信息页</view>
				</view>
			</view>
			<view class="solids-bottom padding-xs flex align-center">
				<view class="padding">16</view>
				<view class="flex-sub text-center">
					<view class="solid-bottom text-lg padding"><text class="text-black">ColorUI组件库</text></view>
					<view class="padding">页面小标题，首要层级显示内容</view>
				</view>
			</view>
			<view class="solids-bottom padding-xs flex align-center">
				<view class="padding">14</view>
				<view class="flex-sub text-center">
					<view class="solid-bottom text-df padding">专注视觉的小程序组件库</view>
					<view class="padding">页面默认字号，用于摘要或阅读文本</view>
				</view>
			</view>
			<view class="solids-bottom padding-xs flex align-center">
				<view class="padding">12</view>
				<view class="flex-sub text-center">
					<view class="solid-bottom text-sm padding"><text class="text-grey">衬衫的价格是9磅15便士</text></view>
					<view class="padding">页面辅助信息，次级内容等</view>
				</view>
			</view>
			<view class="padding-xs flex align-center">
				<view class="padding">10</view>
				<view class="flex-sub text-center">
					<view class="solid-bottom text-xs padding"><text class="text-gray">我于杀戮之中绽放 亦如黎明中的花朵</text></view>
					<view class="padding">说明文本，标签文字等关注度低的文字</view>
				</view>
			</view>
		</view>
		<view class="cu-bar margin-top bg-white" @click="goToIconPage">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>
				图标icon
			</view>
			<view class="cu-list menu"><text class="cu-item arrow"></text></view>
		</view>

		<view class="cu-bar margin-top bg-white">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>
				卡片案例
			</view>
		</view>

		<!-- 卡片 -->
		<view class="cu-card case">
			<view class="cu-item shadow custom-card">
				<view class="image">
					<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" mode="widthFix"></image>
					<view class="cu-tag bg-blue">史诗</view>
					<view class="cu-bar bg-shadeBottom">
						<text class="text-cut">我以天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text>
					</view>
				</view>
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
						<view class="content flex-sub">
							<view class="text-grey">正义天使 凯尔</view>
							<view class="text-gray text-sm flex justify-between">
								十天前
								<view class="text-gray text-sm">
									<text class="cuIcon-attentionfill margin-lr-xs"></text>
									10
									<text class="cuIcon-appreciatefill margin-lr-xs"></text>
									20
									<text class="cuIcon-messagefill margin-lr-xs"></text>
									30
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<van-toast id="van-toast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			ColorList: this.ColorList,
			shadow: true,
			copyData: null
		};
	},
	created() {
		console.log(this.$store);
	},
	onLoad() {},
	methods: {
		// 获取颜色值
		getColor(item) {
			console.log(item);
			this.copyData = item.color;
			this.copy(this.copyData);
		},
		// 复制逻辑
		copy(data) {
			let color = data;
			let colorCopyInput = document.createElement('input');
			colorCopyInput.value = color;
			document.body.appendChild(colorCopyInput);
			colorCopyInput.select(); //选择对象
			console.log(colorCopyInput.value);
			document.execCommand('Copy'); //执行浏览器复制指令
			this.$toast('复制成功');
			colorCopyInput.remove();
		},
		goToIconPage() {
			uni.navigateTo({
				url: '../icon/icon'
			});
		}
	}
};
</script>

<style scoped>
.cstom-grid {
	width: 100%;
}
.custom-button {
	border-radius: 0;
	width: 140upx;
	height: 140upx;
}
.custom-card {
	box-shadow: #8f8f8f 5px 5px 10px;
}
</style>
